<template>
    <div :class="propJson.isList ? '' : 'imageContainer'">
        <el-image v-if="!propJson.isList" :src="imageUrl" :fit="propJson.imageFit" :preview-src-list="previewList"
                  :z-index="100" :style="execStyle" :info="getUrlCom"/>
        <div v-if="propJson.isList" style="display: flex;" :info="getUrlCom">
            <span v-if="propJson.editFlag">暂无数据</span>
            <span v-for="item in imageUrlList">
                <el-image :src="item" :fit="propJson.imageFit" show-progress :preview-src-list="previewList"
                          :z-index="100" :style="execStyle" />
            </span>
        </div>
    </div>
</template>

<script name="ImageComponent" setup lang="ts">
import {computed, defineProps, ref} from "vue";
import {doThirdServiceValue} from "@/utils/lowcode/thirdService";

let props = defineProps(['propJson', 'commonParam']);

let propJson = computed(() => {return props['propJson']})
let commonParam = computed(() => {return props['commonParam']})

let imageUrl = ref("")
let imageUrlList = ref([])
let previewList = ref([])

let execStyle = computed(() => {
    let resStyle = "";
    if (propJson.value.imageHeight) {
        resStyle += "max-height: " + propJson.value.imageHeight + ";";
    }
    if (propJson.value.imageWidth) {
        resStyle += "width: " + propJson.value.imageWidth + ";";
    }
    return resStyle;
})

function execThen(resValue) {
    if (propJson.value.isList) {
        if (propJson.value.isPreview) {
            previewList.value = resValue
        }
        imageUrlList.value = resValue;
    } else {
        let tempList = []
        tempList.push(resValue);
        if (propJson.value.isPreview) {
            previewList.value = tempList
        }
        imageUrl.value = resValue;
    }
}

let getUrlCom = computed(() => {
    getUrl()
})

async function getUrl() {
    await doThirdServiceValue(propJson.value.imgUrlInfo, commonParam.value, execThen, () => {}, null)
}
</script>

<style scoped lang="less">
.imageContainer {
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>